<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./lib/bootstrap.css" />
	<script src="./lib/jquery.js"></script>

	<style>
		.move {
			animation: move 3s linear infinite;
		}

		@keyframes move {
			100% {
				transform: rotate(360deg);
			}
		}
	</style>
</head>

<body style="padding: 15px;">

	<!-- 添加图书的Panel面板 -->
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">添加新图书</h3>
		</div>

		<form>
			<div class="panel-body form-inline">

				<div class="input-group">
					<div class="input-group-addon">书名</div>
					<input name='bookname' type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
				</div>

				<div class="input-group">
					<div class="input-group-addon">作者</div>
					<input name='author' type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
				</div>

				<div class="input-group">
					<div class="input-group-addon">出版社</div>
					<input name="publisher" type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
				</div>

				<button type="submit" id="btnAdd" class="btn btn-primary">添加</button>

			</div>
		</form>
	</div>


	<!-- 图书的表格 -->
	<table class="table table-bordered table-hover">
		<thead>
			<tr>
				<th>Id</th>
				<th>书名</th>
				<th>作者</th>
				<th>出版社</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="tb">

		</tbody>

		<div id='loading' class="move" style="width:100px;height:100px;background:red;display:none">加载中。。。。</div>
	</table>


	<script>
		/* 
animation:动画名  动画时间  动画延迟时间  动画速度   动画次数
animation：move  3s     linear  infinite


		问题：实现2个功能
		功能1：数据展示渲染
			+ 发送请求获取数据
			+ 将获取数据进行渲染到页面中  【渲染肯定是要通过字符串拼接】
		功能2：数据添加
			+ 点击添加按钮
				+ 获取表单数据 【3个表单value值】
				+ 校验  满足条件就发送请求  
				+ 满足了条件：  发送post添加数据请求
				+ 添加成功后重新获取渲染数据的操作
				+ 清空表单
		 */

		$(function() {
			//  封装获取数据的函数
			function renderHtml() {
				$.ajax({
					url: 'http://www.liulongbin.top:3006/api/getbooks',
					type: 'get',
					data: {},
					dataType:'json',
					beforeSend: function() {
						//  发送请求之前做什么   
						//	$('#loading').show()
					},
					success: function(res) {
						//console.log(res.data, 777);
						setTimeout(() => {
							var str = '';
							res.data.forEach(item => {
								//console.log(item, 5555);
								str += `<tr>
								<td>${item.id}</td>
								<td>${item.bookname}</td>
								<td>${item.author}</td>
								<td>${item.publisher}</td>
								<td><button class="btn" data-id='${item.id}'> 删除</button></td>
							</tr>`
							})

							$('#tb').html(str)
							$('#loading').hide()
						}, 1000)
					},
				})
			}

			renderHtml()

			//  添加功能
			//$('#btnAdd').on('click', function() {
			$('form').on('submit', function(e) {
				e.preventDefault()
				//  1-获取表单数据 【3个表单value值】
				var bookname = $('#iptBookname').val()
				var author = $('#iptAuthor').val()
				var publisher = $('#iptPublisher').val()
				//  2-+ 校验  满足条件就发送请求  
				if (bookname == '' || author == '' || publisher == '') {
					return alert('请输入表单内容')
				}
				//  3-+ 满足了条件：  发送post添加数据请求

				// $.post('http://www.liulongbin.top:3006/api/addbook', {
				// 	bookname,
				// 	author: author,
				// 	publisher
				// }, function(res) {
				// 	console.log(res);
				// 	// 4- + 添加成功后重新获取渲染数据的操作
				// 	renderHtml()
				// 	//  5-+ 清空表单
				// 	$('#iptBookname').val('')
				// 	$('#iptAuthor').val('')
				// 	$('#iptPublisher').val('')
				// })

				// //  $.ajax({
				// 	url: '',
				// 	type:'get',
				// 	data:$('form').serialize(),
				// 	success:function(res){
							
				// 	},
				// })

				$.post('http://www.liulongbin.top:3006/api/addbook', $('form').serialize(), function(res) {
					console.log(res);
					// 4- + 添加成功后重新获取渲染数据的操作
					renderHtml()
					//  5-+ 清空表单
					$('#iptBookname').val('')
					$('#iptAuthor').val('')
					$('#iptPublisher').val('')
				})
			})

			//  删除 
			/* 
			+  点击事件   动态生成的需要事件委托
				+ 获取id
				+ 发送请求
				+ 成功刷新页面
			 */
			$('tbody').on('click', '.btn', function() {
				//  alert(11111)
				//var id = $(this).attr('data-id')
				var id = $(this).data('id')
				//alert(id)
				$.ajax({
					url: 'http://www.liulongbin.top:3006/api/delbook',
					type: 'get',
					data: {
						id
					},
					success: function(res) {
						renderHtml()
					},
				})

			})
		})
	</script>


</body>

</html>
